<template>
  <div>

    <input type="text" placeholder="请输入字符">
    <input type="button" value="查找" @click="btnDuery">
    <input type="button" value="新增" @click="btnAdd">
    <div>
      <table>
        <thead>
        <tr>
          <td>id</td>
          <td>名称</td>
          <td>作者</td>
          <td>内容</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in books" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.bookName }}</td>
          <td>{{ item.author }}</td>
          <td>{{ item.shortDes }}</td>
          <td>
            <input type="button" value="编辑" @click="btnFdit">
            <input type="button" value="删除" @click="btnDle">
          </td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'

let books = ref ([
  {
    id:1,
    bookName:'三国杀',
    author:'徐长强',
    shortDes:'徐长强爱玩三国杀'

  },
  {
    id:2,
    bookName:'三国杀',
    author:'徐长强',
    shortDes:'徐长强爱玩三国杀'

  },
  {
    id:3,
    bookName:'三国杀',
    author:'徐长强',
    shortDes:'徐长强爱玩三国杀'

  },
  {
    id:4,
    bookName:'三国杀',
    author:'徐长强',
    shortDes:'徐长强爱玩三国杀'

  },
  {
    id:5,
    bookName:'三国杀',
    author:'徐长强',
    shortDes:'徐长强爱玩三国杀'

  }
])

//============功能函数-开始================
function btnAdd() {
console.log('新增');

}
function btnDuery() {
  console.log('查找');
  
}
function btnFdit() {
  console.log('修改');
  
}
function btnDle() {
  console.log('删除');
  
}


//============功能函数-结束================

</script>



<style scoped>

</style>
